<html>
    <title></title>
    <body>
        <div id="wrap">
        <a href="#" class="hb">
            <div class="c">
            <img src="http://lcldb.cn/public/uploads/3dgirls/imgs/10.jpg" alt=""/>
            <div class="txt">
                <h1>Title here</h1>
                <p>Some longer text here thats wide enough to span on several lines.</p>
            </div>
            </div>
        </a>
        <div class="fullBg">
            <img src="http://lcldb.cn/public/uploads/3dgirls/imgs/10.jpg" alt=""/>
        </div>
        <a href="#" class="hb">
            <div class="c">
            <img src="http://lcldb.cn/public/uploads/3dgirls/imgs/6.jpg" alt=""/>
            <div class="txt">
                <h1>Title here</h1>
                <p>Some longer text here thats wide enough to span on several lines.</p>
            </div>
            </div>
        </a>
        <div class="fullBg">
            <img src="http://lcldb.cn/public/uploads/3dgirls/imgs/6.jpg" alt=""/>
        </div>
        <a href="#" class="hb">
            <div class="c">
            <img src="http://lcldb.cn/public/uploads/3dgirls/imgs/7.jpg" alt=""/>
            <div class="txt">
                <h1>Title here</h1>
                <p>Some longer text here thats wide enough to span on several lines.</p>
            </div>
            </div>
        </a>
        <div class="fullBg">
            <img src="http://lcldb.cn/public/uploads/3dgirls/imgs/7.jpg" alt=""/>
        </div>
        <a href="#" class="hb">
            <div class="c">
            <img src="http://lcldb.cn/public/uploads/3dgirls/imgs/9.jpg" alt=""/>
            <div class="txt">
                <h1>Title here</h1>
                <p>Some longer text here thats wide enough to span on several lines.</p>
            </div>
            </div>
        </a>
        <div class="fullBg">
            <img src="http://lcldb.cn/public/uploads/3dgirls/imgs/9.jpg" alt=""/>
        </div>
        </div>
        <script src="index.js"></script>
        <style>
            *{margin:0;padding:0;}
            a {color:inherit;text-decoration:none;}
            body,html{
            overflow:hidden;
            height:100%;
            font-size:16px;
            font-family: 'Montserrat', sans-serif;
            background:#000;
            color:#fff;
            }
            #wrap{
            position:absolute;
            left:0; top:0;
            width:100%;
            height:100%;
            display:flex;
            align-items:stretch;
            margin:0 2%;
            }
            .hb {
            position:relative;
            width:25%;
            z-index:1;
            display:flex;
            align-items:center;
            z-index:2;
            trasnform:scale(.97);
            }
            .c{
            position:relative;
            display:block;
            max-width:90%;
            }
            .c img {
            position:relative;
            display:block;
            width:100%;
            height:auto;
            z-index:2;
            }
            .txt {
            position:absolute;
            top:100%; left:10%;
            width:80%;
            opacity:0;
            padding:1em 0 0 1em;
            border-left:1px solid;
            z-index:1;
            transform:scaleY(1) translateY(-50px);
            transition:transform .2s, opacity .5s;
            }
            h1 {
            font-size:1.2em;
            font-weight:700;
            text-transform:uppercase;
            }
            .hb:hover .txt {
            opacity:1;
            transform:scaleY(1) translateY(0);
            }
            .fullBg {
            position:fixed;top:0;left:0;width:100%;height:100%;
            opacity:0;
            transition:transform .5s, opacity .5s;
            transform:scale(1);
            z-index:1;
            }
            .fullBg img {
            width:100%;height:100%;
            object-fit:cover;object-position:center;
            opacity:.5;
            }
            .hb:hover + .fullBg {opacity:1;transform:scale(1.02);}
            .credits {
            position:fixed;
            bottom:0;right:0;
            padding:1.5em;
            font-size:.8em;
            text-align:right;
            font-style:italic;
            opacity:.8;
            transition:opacity .2;
            z-index:3;
            }
            .credits:hover {
            text-decoration:underline;
            opacity:1;
            }
        </style>
    </body>
</html>